* {
    box-sizing: border-box
}
body {
    margin:0;
    height: 100vh; 
    width: 100vw;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center; 
    color:white;
    font-family: 'Lato', sans-serif; 
    font-weight: 300;
    background:linear-gradient(to left bottom, white, yellow, skyblue, #b1b1b1,red);
}
.login-div { 
    filter: blur(0.4px);
    width:430px; 
    height:700px;
    padding: 60px 35px 35px 35px; 
    border-radius: 10px;
    background: radial-gradient(circle, #555555,#535353,#505050,#4e4e4e,#4c4c4c);
    box-shadow:
    /*bottom shadow*/
    0px 20px 20px rgba(0,0,0,0.2),
    0px 5px 10px rgba(0,0,0,0.2),
    /*long bottom shadow*/
    0px 70px 50px rgba(0,0,0,0.4),
    /*right shadow*/
    30px 50px 50px rgba(0,0,0,0.2),
    /*left shadow*/
    -30px 50px 50px rgba(0,0,0,0.2), 
    /*right inset*/
    inset 20px 0px 60px rgba(0,0,0,0.1), 
    /*left inset*/
    inset -20px 0px 60px rgba(0,0,0,0.1);
}
.logo {
    background-image:url("hhh.jpg");
    background-size:contain;
    width:100px; 
    height:100px;
    border-radius: 50%; 
    margin: 0 auto;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.title {
    text-align: center; 
    font-size: 28px;
    padding-top:24px;
    letter-spacing:0.5px;
}
.sub-title {
    text-align: center; 
    font-size:15px; 
    padding-top:7px;
    letter-spacing: 3px;
    text-transform: uppercase; 
    font-weight: bold;
}
.fields{
    width: 100%;
    padding: 100px 5px 30px 5px;
}
.fields input { 
    border: none; 
    outline: none;
    background: none; 
    font-size: 18px;
    font-family: 'Lato', sans-serif; 
    color:white;
    padding: 10px 10px 10px 5px;
}
.username,.password {
    display: block;
    border-bottom: 1px solid #b3b3b3; 
    margin-bottom: 30px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white; 
    opacity: 1; /* Firefox */ 
    font-size: 20px; 
    font-weight: 300;
}
::-ms-input-placeholder{ /* Microsoft Edge */
    color:i white; 
    font-size: 20px; 
    font-weight: 300;
}
.signin-button { 
    outline: none;
    border: none;
    cursor: pointer; 
    width: 100%; 
    height: 60px;
    border-radius:5px; 
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    color:white;
    text-align: center; 
    letter-spacing:1px;
    background:radial-gradient(circle, #24cfaa, #26c5a3,#28bb9c, #29b294, #2aa88d); 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.signin-button:hover {
    background: radial-gradient(circle,#2fdbb6, #32d6b3,#32c9a8,#36c7a7,#38bb9f); 
}
.signin-button:active {
    background: radial-gradient(circle, #1da88a,#1ea084, #229c82,#23947b,#238d76); 
}
.link{
    padding-top: 20px;
    text-align: center;
}
.link a {
    text-decoration: none; 
    color:white; 
    font-size: 20px;
}
.fields svg { 
    height: 22px;
    margin-bottom: -3px; 
    margin-right: 10px;
}